//@ts-nocheck
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import * as echarts from 'echarts/lib/echarts'

import React, { useEffect, useImperativeHandle } from 'react'
import { BarGradientColor1 } from '../colorConfig'
import { ChartsInstance } from '../interface'
import './index.less'

let echartsInstance: any

interface IProps {
  /* 单位 */
  // chartId: string
  unit?: string
  // data: Array<{ title: string; data: Array<{ title: string; value: number }> }>
  chartRef?: React.MutableRefObject<ChartsInstance>
}

const BarPointChart: React.FC<IProps> = ({ chartRef, unit = '个' }) => {

  useEffect(() => {
    echartsInstance = echarts.init(document.getElementById('charts-bar-point-chart'))
  }, [])

  useEffect(() => {
    if (echartsInstance) setOptions()
  }, [])

  useImperativeHandle(chartRef, () => ({
    getInstance: () => {
      return echartsInstance
    }
  }))

  const setOptions = (series) => {
    echartsInstance.setOption({
      color: BarGradientColor1,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          shadowStyle: {
            color: '#F5F7FA'
          },
          z: -1
        },
        textStyle: {
          color: '#617185',
          fontSize: 12
        },
        formatter: function (params) {
          return params.map((tar) => tar.marker + tar.seriesName + ' : ' + tar.value).join('<br/>')
        }
      },
      grid: {
        left: 20,
        right: 20,
        top: 16,
        bottom: 36,
        containLabel: true
      },
      legend: {
        bottom: 0,
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 20,
        textStyle: {
          color: '#8B98A9',
          fontSize: 12
        }
      },
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisPointer: {
            type: 'shadow'
          },
          splitLine: { show: false },
          axisTick: {
            show: false
          },
          // offset:-20,
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#8B98A9'
          }
        }
      ],
      yAxis: {
        offset: 20,
        type: 'value',
        name: '',
        yAxisIndex: 0,
        axisLabel: {
          color: '#8B98A9',
          formatter: function (value, index) {
            return value + unit
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            dashOffset: 5,
            width: 1,
            color: '#ECEEF1'
          }
        }
      },
      series: [
        {
          name: 'series[0]',
          type: 'bar',
          barWidth: '50%',
          barGap: '10%',
          symbol: 'rect',
          emphasis: {
            disabled: true
          },
          symbolSize: 10,
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: 'series[1]',
          type: 'line',
          yAxisIndex: 0,
          lineStyle: {
            color: 'transparent'
          },
          symbol: 'circle',
          symbolSize: 10,
          itemStyle: {
            borderColor: '#fff',
            shadowColor: 'rgba(82, 141, 249, 0.8)',
            shadowBlur: 5
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        }
      ]
    })
  }

  return <div className="charts-bar-point" id={'charts-bar-point-chart'} />
}
export default (BarPointChart)
